<template>
  <div class="batch-tags">
    <el-dialog
      :title="title"
      v-model="visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      width="50%"
    >
      <div class="dialog-body">
        <template v-if="batchTagsType === 'batchClearTag'">
          <div>确认要清空所选 {{ assetCount }} 条资产数据的标签吗？</div>
        </template>
        <template v-else>
          <div class="asset-count">已选择 {{ assetCount }} 条数据</div>
          <AssetTags
              @input="tagsChange"
            v-model="tags"
            :is-batch="true"
            :category="searchData.searchType"
            :maxTextLength="maxTextLength"
          ></AssetTags>
        </template>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="cancel">取 消</el-button>
        <el-button type="primary" size="small"  @click="confirm"
        >确 定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup> 
import {defineProps,defineEmits, watch,ref} from 'vue';
import AssetTags from './AssetTags.vue';
import {ElMessage} from 'element-plus'
import {useStore} from 'vuex';
const store= useStore();
const emit=defineEmits(['update:isShow','clearTagsByIds','addTagsByIds','delTagsByIds']);
const props=defineProps({
  isShow: {
      type: Boolean,
      default: false,
    },
    batchTagsType: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '确认',
    },
    selectType: {
      type: Number,
      default: 0,
    },
    searchData: {
      type: Object,
      default: () => {
        return {}
      },
    },
    assetIds: {
      type: Array,
      default: () => [],
    },
    assetCount: {
      type: Number,
      default: 0,
    },
})
const visible=ref(props.isShow);
const tags=ref([]);
const maxTextLength=ref(20);

    watch(()=>visible.value,(newValue,oldValue)=>{
      emit('update:isShow', newValue)
    })
    watch(()=>props.batchTagsType,(newValue,oldValue)=>{
      if (newValue === 'conditionAddTag') {
          maxTextLength.value = 20
        }
        if (newValue === 'conditionDelTag') {
          maxTextLength.value = 500
        }
    },
    {
      immediate: true, 
    }
  )
  const tagsChange=(val)=> {
      tags.value = val
    }
   const cancel=()=> {
      visible.value = false;
      emit('update:isShow', false); // 向父组件发送名为update:isShow的事件，并传递false作为参数
    }
    const confirm=async()=> {
      if (props.batchTagsType !== 'batchClearTag') {
        if (!tags.value.length)
          return ElMessage.warning('请至少添加一个标签')
      }

      const params = {
        assetIds: props.assetIds,
        selectType: props.selectType,
        assetType: props.searchData.searchType,
        condition: props.searchData.searchCondition,
        orderCondition: props.searchData.orderCondition,
        tag: tags.value.map((el:any) => el.tag),
        holdingRatio: props.searchData.holdingRatio,
      }

      // 清空标签
      if (props.batchTagsType === 'batchClearTag') {
        const { code, data } = await store.dispatch(
          'api/emptyTags',
          params
        )
        if (code === 0) {
          ElMessage.success('正在清空')
          emit('clearTagsByIds', props.assetIds)
          cancel()
        }
      }

      // 按条件新增标签
      if (props.batchTagsType === 'conditionAddTag') {
        const { code, data } = await store.dispatch(
          'api/addTagCondition',
          params
        )
        if (code === 0) {
          ElMessage.success('正在新增')
          addTagsByIds()
          cancel()
        }
      }

      // 按条件删除标签
      if (props.batchTagsType === 'conditionDelTag') {
        const { code, data } = await store.dispatch(
          'api/deleteTagCondition',
          params
        )
        if (code === 0) {
          ElMessage.success('正在删除')
          delTagsByIds()
          cancel()
        }
      }
    }
   const addTagsByIds=()=> {
       emit('addTagsByIds', {
        tags: tags.value,
        assetIds: props.assetIds,
      })
    }
    const delTagsByIds=()=> {
      emit('delTagsByIds', {
        tags: tags.value,
        assetIds: props.assetIds,
      })
    }
</script>
<style lang="scss" scoped>
.asset-count {
  margin-bottom: 10px;
}
</style>
